<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>登录</title>
    <link rel="stylesheet" href="css/login.css"/>
    <style>
        body {
            font-family: 'Lucida Grande', 'Helvetica', sans-serif;
        }

    </style>
    <script>
        //自定义弹框
        function Toast(msg, duration) {
            duration = isNaN(duration) ? 3000 : duration;
            var m = document.createElement('div');
            m.innerHTML = msg;
            m.style.cssText = "width:60%; min-width:150px; background:#000; opacity:0.6; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:5px; position:fixed; top:83%; left:20%; z-index:999999; font-weight:bold;";
            document.body.appendChild(m);
            setTimeout(function () {
                var d = 0.5;
                m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
                m.style.opacity = '0';
                setTimeout(function () {
                    document.body.removeChild(m)
                }, d * 1000);
            }, duration);
        }
    </script>
</head>
<body>
<div id="back" onclick="javascript:history.back(-1);"></div>
<div class="login_bg">
    <div id="logo">
    </div>
    <form action="">
        <div class="userName">
            <lable>手机号</lable>
            <input type="text" name="phone" placeholder="请输入手机号" pattern="[0-9A-Za-z]{6,16}" required/>
        </div>
        <div class="passWord">
            <lable>验证码</lable>
            <input class="code" type="text" name="code" placeholder="请输入验证码" pattern="[0-9]{6}" required/>
            <input class="message_btn" type="button" onclick="settime(this)" value="获取验证码"/>
        </div>
        <div class="choose_box">
            <a href="javascript:;">忘记密码</a>
        </div>
        <button class="login_btn" type="button" onclick="login()">登录</button>

    </form>
    <div class="other_login">
        <span>点击登录按钮代表您已同意用户协议和隐私政策</span>
    </div>
    <div class="other_choose">
        <a href="qq">
            <img src="images/qq.png" alt=""/>
        </a>
    </div>
</div>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
    var countdown = 60;
    var mess_btn = $(".message_btn");
    var code;
    $(".message_btn").click(function () {
        $.ajax({
            url: "message",
            type: "GET",
            data: {"phone": $("input[name='phone']").val()},
            dataType: "json",
            success: function (data) {
                if (data.flag) {
                    code = data.code;
                    Toast('获取成功', 2000);
                } else {
                    Toast('获取失败', 2000);
                }
            },
        })
    })

    function settime(val) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            val.value = "获取验证码";
            countdown = 60;
        } else {
            val.setAttribute("disabled", true);
            val.value = "重新发送(" + countdown + ")";
            countdown--;
            setTimeout(function () {
                settime(val)
            }, 1000)
        }
    }

    function login() {
        if ($(".code").val() == code) {
            $.ajax({
                url: "phoneLogin",
                type: "GET",
                data: {"phone": $("input[name='phone']").val()},
                dataType: "json",
                success: function (data) {
                    if (data) {
                        Toast('登录成功', 2000);
                        location.href = "user";
                    } else {
                        Toast('登录失败,请联系管理员!', 2000);
                    }
                },
            })
        } else {
            Toast('验证码不正确', 2000);
        }
    }
</script>
</body>
</html>